<template>
  <div>
    <div style="padding:30px;">
      <el-alert :closable="false" title="数据列表" />
    </div>

    <div style="padding:30px;">
      <div>
        <el-select v-model="formId" size="small" placeholder="请选择表单">
          <el-option v-for="item in formList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" size="small" @click="onCreate">新增</el-button>

      </div>
      <el-table :data="dataList" style="width: 100%;">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <router-link :to="{ path: '/nested/data/view', query: { dataId: scope.row.id }}">
              <el-button type="text" size="small">查看</el-button>
            </router-link>
            <router-link :to="{ path: '/nested/data/form', query: { dataId: scope.row.id }}">
              <el-button type="text" size="small">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { listData, listForm } from '@/api/form'

export default {
  data() {
    return {
      dataList: [],
      formList: [],
      formId: null
    }
  },
  created() {
    listData().then(data => {
      this.dataList = data.data
    })
    listForm().then(data => {
      this.formList = data.data
    })
  },
  methods: {
    onCreate() {
      if (this.formId) {
        this.$router.push({ path: '/nested/data/form', query: { formId: this.formId }})
      } else {
        this.$message.warning('请选择表单')
      }
    }
  }

}
</script>
